<script lang="ts" setup>
import { onMounted, onUnmounted, ref } from "vue";
import DownloadCard from "./DownloadCard.vue";
import { downloadList as downloadData } from "../../../utils/ts/download";

const downloadList = ref(downloadData);

const bgRef = ref<HTMLDivElement | null>(null);
const dlRef = ref<HTMLDivElement | null>(null);

const startBird = () => {
  window.dispatchEvent(new CustomEvent("birdStart"));
};

onUnmounted(() => {
  window.dispatchEvent(new CustomEvent("birdEnd"));
});
onMounted(() => {
  if (!bgRef.value || !dlRef.value) return;

  bgRef.value.classList.add("animate-bg");
  dlRef.value.classList.add("dl");

  let bird = document.querySelector("#bird");

  if (bird) {
    startBird();
    return;
  }

  bird = document.createElement("script");
  bird.setAttribute("id", "bird");
  bird.setAttribute("src", "/index/dx.js");
  (bird as HTMLScriptElement).onload = () => {
    window.dispatchEvent(new CustomEvent("birdStart"));
  };
  document.body.append(bird);
});
</script>
<template>
  <div class="bg" ref="dlRef">
    <div class="z-2 relative">
      <p class="pt-30 text-3xl md:text-6xl font-bold text-center">
        下载和安装使用
      </p>
      <p class="text-center text-lg text-gray-500">
        2分钟装好面板，一键管理服务器
      </p>
      <p class="text-center text-lg text-gray-500 px-5">
        集成LAMP/LNMP环境安装，网站、FTP、数据库、文件管理、软件安装等功能
      </p>

      <div class="flex w-full justify-center">
        <div class="flex flex-wrap justify-around max-w-375">
          <DownloadCard v-for="(item, index) in downloadList" :key="'download' + index" :item="item" />
        </div>
      </div>
    </div>
    <div ref="bgRef" class="absolute h-full w-full top-0 z-1"></div>
  </div>
  <!-- <div class="md:-mt-80 relative z-2"> -->
  <!-- <IndexFooter /> -->
  <!-- </div> -->
</template>
<style lang="scss" scoped>
.bg {
  background: linear-gradient(0deg, #fff, #d8efdb, #edf7ef);
  height: calc(100vh);
}
</style>

<style>
.bird {
  width: 25px;
  height: 5px;
  display: inline-block;
  position: absolute;
  transform: skew(20deg, 20deg);
  animation: wave 2.5s ease-in-out infinite;
  z-index: 0;
}

.bird:before,
.bird:after {
  content: "";
  width: 100%;
  height: 100%;
  background-color: #1aa837;
  position: absolute;
  border-radius: 20%;
  opacity: 0.1;
}

.bird:before {
  right: 49%;
  transform-origin: right;
  transform: rotate(-40deg);
  animation: flap-left 0.75s ease-in-out infinite;
}

.bird:after {
  left: 49%;
  transform-origin: left;
  transform: rotate(40deg);
  animation: flap-right 0.75s linear infinite;
}

@keyframes wave {
  40% {
    transform: translateY(40px) skew(20deg, 20deg);
  }

  50% {
    transform: translateY(50px) skew(20deg, 20deg);
  }

  60% {
    transform: translateY(40px) skew(20deg, 20deg);
  }

  100% {
    transform: translateY(0) skew(20deg, 20deg);
  }
}

@keyframes flap-left {
  60% {
    transform: rotate(10deg);
  }

  75% {
    transform: rotate(20deg);
  }

  100% {
    transform: rotate(-40deg);
  }
}

@keyframes flap-right {
  60% {
    transform: rotate(-10deg);
  }

  75% {
    transform: rotate(-20deg);
  }

  100% {
    transform: rotate(40deg);
  }
}
</style>
